<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/composables/user'
import { applyJob, getJobDetail } from '@/api/job'
import { goRegisterAndBack } from '@/utils/user'

const job = ref({} as any)
const distance = ref(1000)
const isShowReport = ref(false)
const inviteName = ref('')
const showSalary = ref(false)
const disableList = ref('')
const jobId = ref('')
const shareJobId = ref('')
const hideButton = ref(false)
const subMchid = ref('')
const scene = ref('' as string | string[])

async function onGetJobDetail() {
    const jsbinfo = await getJobDetail({
        // enterType 0=C端过程 2b端用户分享 5日日保进入 6 长期保 进入
        jobId: jobId.value || shareJobId.value,
        enterType: jobId.value ? 0 : 2,
    })
    jsbinfo.jobTag = jsbinfo.jobTag ? jsbinfo.jobTag.split(';') : []
    jsbinfo.jobLocation = jsbinfo.jobLocation.split(',')
    jsbinfo.longitude = jsbinfo.jobLocation[0]
    jsbinfo.latitude = jsbinfo.jobLocation[1]
    jsbinfo.jobDetail = jsbinfo.jobDetail.replace(/[\r\n]/g, '「').split('「').filter((item: any) => item)
    jsbinfo.jobDetailRich = jsbinfo.jobDetail.map((item: any) => {
        return item.replace(/#[1-9|\u4E00-\u9FA5|A-Z|a-z]{1,}/g, (word: any) => {
            return `<span style="color:#3E5FF5">${word}</span>`
        })
    })
    job.value = jsbinfo
}

async function currentLocation() {
    const result = await uni.getLocation({
        type: 'gcj02',
    })
    // 计算当前位置和公司位置，之间的距离
    const La1 = (result.latitude * Math.PI) / 180.0
    const La2 = (job.value.latitude * Math.PI) / 180.0
    const La3 = La1 - La2
    const Lb3
        = (result.longitude * Math.PI) / 180.0
        - (job.value.longitude * Math.PI)
        / 180.0
    let s
        = 2
        * Math.asin(
            Math.sqrt(
                Math.sin(La3 / 2) ** 2
                + Math.cos(La1)
                * Math.cos(La2)
                * Math.sin(Lb3 / 2) ** 2,
            ),
        )
    s = s * 6378.137 // 地球半径
    s = Math.round(s * 10000) / 10000
    distance.value = Number.parseInt(s as any)
}

// 点击报名
async function onApplyJob() {
    if (!user.userInfo.value.userId) {
        const res = await uni.showModal({
            title: '提示',
            content: '您还未登录，是否立即去登录？',
            showCancel: true,
        })
        if (res.confirm)
            goRegisterAndBack(true, `/pages/job-detail/job-detail?scene=${scene.value}`)
        return
    }
    if (job.value.params.workerApplyDetail !== undefined) {
        uni.navigateTo({
            url: `/pages/job-status/job-status?jobid=${job.value.id}&type=` + 'success' + '&title=' + '您已报名',
            events: {},
        })
        return
    }
    const result = await applyJob({
        jobId: job.value.id,
        applyType: jobId.value ? 0 : 2,
    })
    setTimeout(() => {
        uni.navigateTo({
            url: `/pages/job-status/job-status?jobid=${job.value.id}&type=` + 'success' + '&title=' + '报名成功',
            events: {},
        })
    }, 500)
}

onLoad((options: any) => {
    jobId.value = options.id
    hideButton.value = options?.from === 'signUp'
    if (options.scene) {
        const scenes = decodeURIComponent(options.scene)
        const option: any = {}
        scene.value = scenes.split('&')
        for (const i in scene.value) {
            const query = scene.value[i].split('=')
            option[query[0]] = query[1]
        }
        console.log(option, 'optionoptionoption')
        options = option
    }
    if (options.uid)
        shareJobId.value = options.id

    user.waitLogin().then(async (res) => {
        await onGetJobDetail()
        await currentLocation()
    }).catch(async (rej) => {
        await onGetJobDetail()
        await currentLocation()
    })
})
</script>

<template>
    <NavbarContainer>
        <view class="mycontainer">
            <view class="container-box">
                <view v-if="job.params?.jobFile?.length">
                    <swiper :next-margin="job.params?.jobFile?.length === 1 ? '20rpx' : '30rpx'"
                            :previous-margin="job.params?.jobFile?.length === 1 ? '20rpx' : '30rpx'" class="swiper">
                        <swiper-item v-for="(item, i) in job.params.jobFile" :key="i" class="h-full">
                            <image v-if="item.fileType === 'photo'" mode="widthFix" :src="item.fileUrl" class="swiper-image" />
                            <video v-if="item.fileType === 'video'" :src="item.fileUrl" class="swiper-video" />
                        </swiper-item>
                    </swiper>
                </view>
                <view class="content-box content-box-active">
                    <view class="recruit-information inside">
                        <view class="recruit-company">{{ job.jobName }}</view>
                        <view class="mt-12rpx flex items-center justify-between">
                            <view class="work-labels">
                                <view v-for="(item, i) in job.jobTag" :key="i" class="work-label">
                                    {{ item }}
                                </view>
                            </view>
                            <view class="recruit-brief">{{ job.city }} {{ job.district }}</view>
                        </view>
                        <view class="row-top flex items-center justify-between">
                            <view class="recruit-price">{{ job.salary }}{{ job.jobSalaryType }}</view>
                            <view class="progress">
                                <view v-if="job.applyCount" class="work-recruit-num">
                                    <image class="work-recruit-icon" src="../../assets/image/hot.png" mode="widthFix" />
                                    <view class="work-recruit-text text-xs">{{ job.applyCount }}人已报名</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="inside salary-details">
                        <view class="job-details-title">工作详情</view>
                        <view v-for="(item, i) in job.jobDetailRich" :key="i" class="salary-details-list">
                            <view class="salary-details-spot" />
                            <view class="salary-details-name">
                                <rich-text class="rich-text" :nodes="item" />
                            </view>
                        </view>
                    </view>
                    <view class="inside address">
                        <view class="job-details-title">公司信息</view>
                        <view class="company-name">{{ job.serveCompanyName }}</view>
                        <view class="job-details-title">公司地址</view>
                        <view class="address-detailed">
                            <view class="address-detailed-info">
                                <view class="address-name">{{ job.jobAddress }}</view>
                                <view class="address-position">距你当前位置 {{ distance }} km</view>
                            </view>
                        </view>
                    </view>
                    <view v-if="!hideButton" class="foot-btn">
                        <view class="long-btn report-btn" @click="onApplyJob">我要报名</view>
                    </view>
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.container-box-active {
    padding: 30rpx 30rpx 0 30rpx !important;
}

.container-box {
    /* padding: 0 30rpx 0 30rpx; */
    box-sizing: border-box;
    margin-bottom: 30rpx;
}

.mycontainer {
    background: #fafafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 200rpx;
}

.swiper {
    width: 750rpx;
    height: 371rpx;
    border-radius: 26rpx;
    margin-top: 20rpx;
}

.swiper-image {
    width: 100%;
    height: 371rpx;
    border-radius: 26rpx;
}

.swiper-video {
    width: 100%;
    height: 371rpx;
    border-radius: 26rpx;
}

.swiper-video-active {
    width: 100vw;
    height: 100vh;
    position: relative;
    left: 0;
    top: 0;
    z-index: 9;
}

.swiper-block {
    margin-bottom: 30rpx;
}

.content-box {
    width: 680rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.inside {
    width: 680rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 30rpx;
    margin-top: 20rpx;
}

.recruit-company {
    font-size: 40rpx;
    font-weight: 600;
    color: #202536;
}

.recruit-brief {
    font-size: 28rpx;
    color: #9497b1;
    white-space: nowrap;
}

.recruit-price {
    font-weight: 600;
    color: #ff7e68;
    font-size: 32rpx;
}

.personal-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.personal-information-box {
    display: flex;
    flex: 1;
}

.portrait {
    width: 90rpx;
    height: 90rpx;
    margin-right: 20rpx;
    border-radius: 50%;
}

.info {
    flex: 1;
}

.personal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #202536;
}

.personal-work-place {
    font-size: 28rpx;
    color: #9497b1;
    margin-top: 12rpx;
}

.salary-details-content {
    margin: 50rpx 0 10rpx;
    color: #565868;
    line-height: 46rpx;
    font-size: 28rpx;
}

.row-top {
    margin-top: 20rpx;
}

.job-details-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #202536;
    margin-bottom: 36rpx;
}

.job-details-list {
    margin-top: 20rpx;
}

.job-details-i {
    display: flex;
    margin-top: 10rpx;
}

.job-details-i text {
    font-size: 28rpx;

    color: #9497b1;
}

.job-details-name {
    font-size: 28rpx;
    color: #9497b1;
    white-space: pre-wrap;
}

.address {
    margin-bottom: 30rpx;
}

.address-detailed {
    margin-top: 12rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-detailed-info {
    flex: 1;
}

.address-name {
    color: #202536;
    font-size: 28rpx;
    margin-bottom: 12rpx;
}

.address-position {
    color: #9497b1;
    font-size: 24rpx;
}

.navigation {
    width: 142rpx;
    height: 56rpx;
    background: #3e5ff5;
    border-radius: 28rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 56rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation image {
    width: 35rpx;
    height: 35rpx;
    margin-right: 10rpx;
}

.operation {
    width: 100vw;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 0;
    position: fixed;
    bottom: 0;
}

.operation-edit {
    width: 345rpx;
    height: 88rpx;
    border-radius: 44rpx 0rpx 0rpx 44rpx;
    border: 2rpx solid #3e5ff5;
    text-align: center;
    line-height: 88rpx;
    color: #3e5ff5;
    font-size: 32rpx;
}

.be-laid-off {
    width: 345rpx;
    height: 88rpx;
    background: #3e5ff5;
    border-radius: 0rpx 44rpx 44rpx 0rpx;
    border: 2rpx solid #3e5ff5;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
}

.navigation > .follow-img {
    width: 20rpx;
    height: 20rpx;
}

.swiper-item {
    width: 95% !important;
}

.work-labels {
    display: flex;
    flex-wrap: wrap;
}

.work-label {
    color: #9497b1;
    background-color: #f4f4f7;
    padding: 8rpx 12rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
}

.company-name {
    font-size: 32rpx;
    color: #565868;
    margin: 12rpx 0 30rpx;
}

.progress {
    display: flex;
    align-items: center;
    color: #565868;
}

.work-progress {
    width: 276rpx;
}

.work-recruit-num {
    display: flex;
    align-items: center;
}

.work-recruit-icon {
    width: 28rpx;
    height: 28rpx;
}

.work-recruit-text {
    margin-left: 8rpx;
}

.activity {
    width: 690rpx;
    height: 210rpx;
    margin: 30rpx 0 10rpx;
}

.activity-content {
    height: 210rpx;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 146rpx 20rpx 20rpx;
}

.activity-reward {
    width: 140rpx;
    flex-shrink: 0;
    text-align: center;
}

.activity-reward-num {
    font-size: 52rpx;
    font-weight: 900;
}

.activity-text {
    color: #9a2a00;
    line-height: 42rpx;
    font-size: 28rpx;
    padding-left: 40rpx;
    font-weight: 600;
}

.report-btn.long-btn {
    width: 90vw;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 44rpx;
    box-sizing: border-box;
    background-color: #3e5ff5;
}

.foot-btn {
    flex-direction: column;
    padding-top: 0;
}

.invite {
    width: 100vw;
    padding: 15rpx 0;
    background: #fff1ec;
    color: #ff7642;
    padding-left: 100rpx;
}

.foot-btn .long-btn {
    margin-top: 20rpx;
}

.report-btn.long-btn.group-btn {
    background: linear-gradient(218deg, #ffa36a 0%, #ff0550 100%);
}

.salary-alert {
    width: 100%;
    background: #f8fefa;
    height: 750rpx;
    text-align: center;
}

.salary-box {
    position: relative;
}

.salary-alert .title {
    font-size: 36rpx;
    font-weight: bold;
    margin: 90rpx 0 16rpx;
}

.salary-alert .desc {
    font-size: 28rpx;
    color: #9497b1;
}

.post-img {
    margin: 30rpx 0;
    width: 501rpx;
    height: 255rpx;
}

.salary-alert .short-btn {
    width: 503rpx;
    height: 103rpx;
    background: #55ba75;
    border-radius: 52rpx;
}

.salary-alert .report {
    color: #565868;
    font-size: 32rpx;
    margin-top: 30rpx;
}

.salary-details-list {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
}

.salary-details-spot {
    border-radius: 10rpx;
    width: 7rpx;
    height: 7rpx;
    background-color: #9497B1;
}

.salary-details-name {
    font-size: 28rpx;
    color: #565868;
    margin-left: 20rpx;
    flex: 1;
}
</style>

<route lang="json">
{
"style": {
"navigationBarTitleText": "岗位详情"
}
}
</route>
